<template>
  <div class="body-content body-content--subpage">
    <!-- 主内容区 -->
    <div class="l-page-city-weather">
      <div class="container">
        <!-- 当前天气 -->
        <div class="l-page-city-weather__current">
          <div class="c-city-weather-current city-weather-cloudy">
            <div class="current-weather__bg">
              <div class="current-header">
                <div class="current-time-aqi">
                  <p class="current-time">{{ currentWeather.updateTime }}</p>
                  <a class="air-tag air-tag--1" href="#">
                    AQI 优
                  </a>
                </div>
              </div>
              <div class="current-live">
                <div class="current-live__item">
                  <img :src="getWeatherIcon(currentWeather.icon)"
                       @error="$event.target.src='https://a.hecdn.net/icon/c/100.png'"
                       alt="天气图标" style="width: 80px; height: 80px;">
                </div>
                <div class="current-live__item">
                  <p class="temperature">{{ currentWeather.temp }}°</p>
                  <p class="weather-desc">{{ currentWeather.weather }}</p>
                </div>
              </div>
              <div class="current-abstract">
                今天白天晴，夜晚晴，比昨天热很多，现在27°，空气不错。
              </div>
              <div class="current-basic d-flex justify-content-between align-items-center">
                <div class="current-basic___item">
                  <p>{{ currentWeather.windScale }}</p>
                  <p>{{ currentWeather.windDir }}</p>
                </div>
                <div class="current-basic___item">
                  <p>{{ currentWeather.humidity }}</p>
                  <p>相对湿度</p>
                </div>
                <div class="current-basic___item">
                  <p>{{ currentWeather.uvIndex }}</p>
                  <p>紫外线</p>
                </div>
                <div class="current-basic___item hidden-740">
                  <p>{{ currentWeather.feelsLike }}</p>
                  <p>体感温度</p>
                </div>
                <div class="current-basic___item hidden-740">
                  <p>{{ currentWeather.vis }}</p>
                  <p>能见度</p>
                </div>
                <div class="current-basic___item hidden-740">
                  <p>{{ currentWeather.precip }}</p>
                  <p>降水量</p>
                </div>
                <div class="current-basic___item hidden-740">
                  <p>{{ currentWeather.pressure }}</p>
                  <p>大气压</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 左右两栏布局 -->
        <div class="qweather-layout d-flex align-items-start justify-content-between" style="height:auto!important">
          <!-- 左侧列表 -->
          <div class="qweather-list" style="height:auto!important">
            <!-- 24小时预报 -->
            <div class="qweather-list__row">
              <div class="c-city-weather-hour24">
                <h3 class="qweather-title">24小时预报</h3>
                <div class="city-hour24__chart jsHour24Container" ref="hour24Chart"></div>
                <div class="hour24 d-flex justify-content-between align-items-center">
                  <div class="hour24__item" v-for="(hour, index) in visibleHourlyData" :key="index">
                    <img :src="getWeatherIcon(hour.iconCode)"
                         @error="$event.target.src='https://a.hecdn.net/icon/c/100.png'"
                         alt="天气图标" style="width: 28px; height: 28px;">
                    <div class="wind-arrow" :style="`transform:rotate(${hour.windDegree}deg)`">↑</div>
                    <span class="text-center">{{ hour.time }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 未来预报 -->
            <div class="qweather-list__row">
              <div class="c-city-weather-forecast">
                <h3 class="qweather-title">未来预报</h3>
                <div class="qweather-tabs">
                  <div class="tabs__row d-flex align-items-center" v-for="(day, index) in forecastData" :key="index">
                    <div class="date-bg d-flex align-items-center">
                      <div class="date">
                        <p>{{ day.weekday }}</p>
                        <p>{{ day.date }}</p>
                      </div>
                      <img class="icon" :src="getWeatherIcon(day.icon)"
                         @error="$event.target.src='https://a.hecdn.net/icon/c/100.png'"
                         :alt="day.weather" style="width: 28px; height: 28px;">
                    </div>
                    <div class="tmp-line-bg d-flex align-items-center">
                      <div class="space" :style="`flex: 0 0 ${day.spaceLeft}%`">&nbsp;</div>
                      <div class="tmp-cont d-flex align-items-center">
                        <span class="temp">{{ day.tempMax }}°</span>
                        <div class="tmp-line"></div>
                        <span class="temp last">{{ day.tempMin }}°</span>
                      </div>
                      <div class="space" :style="`flex: 0 0 ${day.spaceRight}%`">&nbsp;</div>
                    </div>
                    <span class="qweather-arrow-right"></span>
                  </div>
                </div>
                <div class="more">
                  <a href="#">查看15天预报</a>
                </div>
              </div>
            </div>

            <!-- 空气质量 -->
            <div class="qweather-list__row">
              <div class="c-city-air-current d-flex justify-content-start align-items-center">
                <div class="city-air__chart">
                  <div class="aqi jsChartAir">
                    <canvas width="140" height="140" style="width:140px;height:140px;" ref="airCanvas"></canvas>
                  </div>
                  <h4>{{ currentAQI.level }}</h4>
                </div>
                <div class="air-charts__iaqi">
                  <div class="air-charts-iaqi__row d-flex align-items-center">
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.pm25 }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.pm25 / 250 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">PM2.5</p>
                    </div>
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.pm10 }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.pm10 / 420 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">PM10</p>
                    </div>
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.o3 }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.o3 / 800 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">O<sub>3</sub></p>
                    </div>
                  </div>
                  <div class="air-charts-iaqi__row d-flex align-items-center">
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.co }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.co / 90 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">CO</p>
                    </div>
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.no2 }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.no2 / 280 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">NO<sub>2</sub></p>
                    </div>
                    <div class="air-charts-iaqi__item">
                      <div class="value text-center">{{ currentAQI.so2 }}</div>
                      <div class="progress">
                        <div class="progress__value" :class="`air-tag--${currentAQI.category}`" :style="{ width: (currentAQI.so2 / 500 * 100) + '%' }"></div>
                      </div>
                      <p class="aqi-title text-center">SO<sub>2</sub></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 太阳和月亮轨迹 -->
            <div class="qweather-list__row">
              <div class="c-astronomy-chart">
                <h3 class="qweather-title">太阳和月亮轨迹</h3>
                <div class="astronomy-container">
                  <!-- 太阳轨迹 -->
                  <div class="sun-section">
                    <div class="section-header">
                      <h4>☀️ 太阳</h4>
                      <div class="current-time">现在 {{ currentTime }}</div>
                    </div>
                    <div class="trajectory-chart" ref="sunChart"></div>
                    <div class="sun-info">
                      <div class="sun-times">
                        <div class="time-item">
                          <span class="time">{{ sunData.sunrise }}</span>
                          <span class="label">日出</span>
                        </div>
                        <div class="time-item">
                          <span class="time">{{ sunData.sunset }}</span>
                          <span class="label">日落</span>
                        </div>
                      </div>
                      <div class="sun-position">
                        <div class="position-item">
                          <span class="value">{{ sunData.altitude }}°</span>
                          <span class="label">高度角</span>
                        </div>
                        <div class="position-item">
                          <span class="value">{{ sunData.azimuth }}</span>
                          <span class="label">方位</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 月亮轨迹 -->
                  <div class="moon-section">
                    <div class="section-header">
                      <h4>🌙 月亮</h4>
                      <div class="current-time">现在 {{ currentTime }}</div>
                    </div>
                    <div class="trajectory-chart" ref="moonChart"></div>
                    <div class="moon-info">
                      <div class="moon-times">
                        <div class="time-item">
                          <span class="time">{{ moonData.moonrise }}</span>
                          <span class="label">月升</span>
                        </div>
                        <div class="time-item">
                          <span class="time">{{ moonData.moonset }}</span>
                          <span class="label">月落</span>
                        </div>
                      </div>
                      <div class="moon-position">
                        <div class="position-item">
                          <span class="value">{{ moonData.altitude }}°</span>
                          <span class="label">高度角</span>
                        </div>
                        <div class="position-item">
                          <span class="value">{{ moonData.azimuth }}</span>
                          <span class="label">方位</span>
                        </div>
                      </div>
                      <div class="moon-phase">
                        <span class="phase-icon">{{ moonData.phaseIcon }}</span>
                        <span class="phase-name">{{ moonData.phaseName }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧菜单 -->
          <div class="qweather-menu">
            <!-- 温度地图 -->
            <div class="qweather-menu__row hidden-740">
              <div class="c-img-map">
                
                <div class="img-map__title">
                  <h3 class="qweather-title">温度</h3>
                </div>
                <div class="img-map__btn">
                  <a href="#" target="_blank" rel="noopener noreferrer">
                    <div class="img"></div>
                    <span>查看完整天气地图</span>
                  </a>
                </div>
              </div>
            </div>

            <!-- 天气排行 -->
            <div class="qweather-menu__row">
              <div class="c-city-weather-rank">
                <h3 class="qweather-title">天气排行</h3>
                <nav class="qweather-select">
                  <div class="nav" role="tablist">
                    <a class="active" id="city-weather-max-tmp-tab" data-bs-toggle="tab" href="#city-weather-max-tmp" role="tab">
                      今日最高温
                      <div class="line"></div>
                    </a>
                  </div>
                </nav>
                <div class="tab-content">
                  <div class="tab-pane active" id="city-weather-max-tmp" role="tabpanel">
                    <div class="qweather-tabs">
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>1</i>
                        <div class="city">
                          <p>抚州市</p>
                        </div>
                        <span class="temp">38°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>2</i>
                        <div class="city">
                          <p>吉安市</p>
                        </div>
                        <span class="temp">38°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>3</i>
                        <div class="city">
                          <p>萍乡市</p>
                        </div>
                        <span class="temp">38°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>4</i>
                        <div class="city">
                          <p>赣州市</p>
                        </div>
                        <span class="temp">37°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>5</i>
                        <div class="city">
                          <p>景德镇市</p>
                        </div>
                        <span class="temp">37°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>6</i>
                        <div class="city">
                          <p>新余市</p>
                        </div>
                        <span class="temp">37°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>7</i>
                        <div class="city">
                          <p>鹰潭市</p>
                        </div>
                        <span class="temp">36°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>8</i>
                        <div class="city">
                          <p>上饶市</p>
                        </div>
                        <span class="temp">36°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>9</i>
                        <div class="city">
                          <p>宜春市</p>
                        </div>
                        <span class="temp">36°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>10</i>
                        <div class="city">
                          <p>南昌市</p>
                        </div>
                        <span class="temp">35°</span>
                      </a>
                      <a href="#" class="tabs__row d-flex align-items-center">
                        <i>11</i>
                        <div class="city">
                          <p>九江市</p>
                        </div>
                        <span class="temp">34°</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 附近城市 -->
            <div class="qweather-menu__row">
              <div class="c-city-weather-around">
                <h3 class="qweather-title">附近城市</h3>
                <div class="qweather-tabs">
                  <a href="#" class="tabs__row d-flex align-items-center">
                    <div class="city">
                      <p>武汉市</p>
                    </div>
                    <img :src="getWeatherIcon('100')" alt="QWeather">
                    <span class="temp-interval">34°~25°</span>
                  </a>
                  <a href="#" class="tabs__row d-flex align-items-center">
                    <div class="city">
                      <p>黄冈市</p>
                    </div>
                    <img :src="getWeatherIcon('100')" alt="QWeather">
                    <span class="temp-interval">34°~25°</span>
                  </a>
                  <a href="#" class="tabs__row d-flex align-items-center">
                    <div class="city">
                      <p>鄂州市</p>
                    </div>
                    <img :src="getWeatherIcon('100')" alt="QWeather">
                    <span class="temp-interval">35°~25°</span>
                  </a>
                  <a href="#" class="tabs__row d-flex align-items-center">
                    <div class="city">
                      <p>孝感市</p>
                    </div>
                    <img :src="getWeatherIcon('104')" alt="QWeather">
                    <span class="temp-interval">34°~24°</span>
                  </a>
                  <a href="#" class="tabs__row d-flex align-items-center">
                    <div class="city">
                      <p>黄石市</p>
                    </div>
                    <img :src="getWeatherIcon('100')" alt="QWeather">
                    <span class="temp-interval">35°~25°</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 历史温度趋势图 -->
        <div class="l-page-city-weather__historical-temp">
          <div class="qweather-layout d-flex align-items-start justify-content-between" style="height:auto!important">
            <!-- 左侧历史温度图表 -->
            <div class="qweather-list" style="height:auto!important">
              <div class="qweather-list__row">
                <div class="c-city-historical-temp">
                  <h3 class="qweather-title">{{ currentLocation.city }}过去9年温度趋势</h3>
                  <div class="historical-temp-chart" ref="historicalTempChart"></div>
                </div>
              </div>
            </div>
            <!-- 右侧空白区域 -->
            <div class="qweather-menu" style="height:auto!important">
              <!-- 占位内容 -->
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'

// API配置
const API_KEY = '78db6a9c3b4d445881d8fa1ba2d0fa8a'
const API_BASE_URL = 'https://pr6yvxwd8j.re.qweatherapi.com'

// 当前位置
const currentLocation = ref({
  longitude: 114.40,
  latitude: 30.50,
  city: '武汉市',
  district: '洪山区'
})

// 当前天气数据
const currentWeather = ref({
  temp: '27',
  weather: '阴',
  icon: '104',
  windDir: '东南风',
  windScale: '2级',
  humidity: '84%',
  vis: '22km',
  pressure: '1009hPa',
  precip: '0.0mm',
  feelsLike: '30°',
  uvIndex: '弱',
  updateTime: '2025-09-15 08:49'
})

// 获取天气图标路径
const getWeatherIcon = (code) => {
  // 确保图标代码存在，否则使用默认的晴天图标
  const iconCode = code || '100'
  // 使用本地的qweather-icons包中的SVG图标
  return `/node_modules/qweather-icons/icons/${iconCode}.svg`
}

// 24小时图表引用
const hour24Chart = ref(null)

// 空气质量图表引用
const airCanvas = ref(null)

// 太阳月亮图表引用
const sunChart = ref(null)

// 历史温度图表引用
const historicalTempChart = ref(null)

// 历史温度数据（过去9年：2017-2025）
const historicalTempData = ref([
  { year: 2017, maxTemp: 38.8, minTemp: -3.8, avgTemp: 18.1 },
  { year: 2018, maxTemp: 40.1, minTemp: -5.2, avgTemp: 17.8 },
  { year: 2019, maxTemp: 38.9, minTemp: -2.9, avgTemp: 18.4 },
  { year: 2020, maxTemp: 37.6, minTemp: -3.5, avgTemp: 17.9 },
  { year: 2021, maxTemp: 39.8, minTemp: -4.8, avgTemp: 18.2 },
  { year: 2022, maxTemp: 41.3, minTemp: -3.1, avgTemp: 18.7 },
  { year: 2023, maxTemp: 39.5, minTemp: -4.2, avgTemp: 18.3 },
  { year: 2024, maxTemp: 38.7, minTemp: -2.8, avgTemp: 18.6 },
  { year: 2025, maxTemp: 39.1, minTemp: -3.4, avgTemp: 18.5 }
])

const moonChart = ref(null)

// 当前空气质量数据
const currentAQI = ref({
  aqi: 35,
  level: '优',
  category: 1,
  pm25: 13,
  pm10: 20,
  o3: 116,
  co: 0.7,
  no2: 16,
  so2: 4
})

// 当前时间
const currentTime = ref(new Date().toLocaleTimeString('zh-CN', {
  hour: '2-digit',
  minute: '2-digit',
  hour12: false
}))

// 太阳数据
const sunData = ref({
  sunrise: '06:07',
  sunset: '18:31',
  altitude: '-34',
  azimuth: '298°WNW',
  fxLink: ''
})

// 月亮数据
const moonData = ref({
  moonrise: '--',
  moonset: '14:12',
  altitude: '-25',
  azimuth: '28°NNE',
  phaseIcon: '🌘',
  phaseName: '残月',
  fxLink: ''
})

// 24小时数据 - 完整24小时数据
const hourlyData = ref([
  { temp: 28, icon: getWeatherIcon('101'), windDegree: 299, time: '9am' },
  { temp: 30, icon: getWeatherIcon('101'), windDegree: 271, time: '10am' },
  { temp: 32, icon: getWeatherIcon('100'), windDegree: 280, time: '11am' },
  { temp: 34, icon: getWeatherIcon('100'), windDegree: 269, time: '12am' },
  { temp: 35, icon: getWeatherIcon('100'), windDegree: 243, time: '1pm' },
  { temp: 35, icon: getWeatherIcon('100'), windDegree: 225, time: '2pm' },
  { temp: 34, icon: getWeatherIcon('100'), windDegree: 203, time: '3pm' },
  { temp: 33, icon: getWeatherIcon('100'), windDegree: 180, time: '4pm' },
  { temp: 32, icon: getWeatherIcon('100'), windDegree: 160, time: '5pm' },
  { temp: 30, icon: getWeatherIcon('100'), windDegree: 140, time: '6pm' },
  { temp: 28, icon: getWeatherIcon('150'), windDegree: 120, time: '7pm' },
  { temp: 27, icon: getWeatherIcon('150'), windDegree: 100, time: '8pm' },
  { temp: 26, icon: getWeatherIcon('150'), windDegree: 90, time: '9pm' },
  { temp: 25, icon: getWeatherIcon('150'), windDegree: 80, time: '10pm' },
  { temp: 25, icon: getWeatherIcon('150'), windDegree: 70, time: '11pm' },
  { temp: 24, icon: getWeatherIcon('150'), windDegree: 60, time: '0am' },
  { temp: 24, icon: getWeatherIcon('150'), windDegree: 50, time: '1am' },
  { temp: 23, icon: getWeatherIcon('150'), windDegree: 40, time: '2am' },
  { temp: 23, icon: getWeatherIcon('150'), windDegree: 30, time: '3am' },
  { temp: 23, icon: getWeatherIcon('150'), windDegree: 20, time: '4am' },
  { temp: 23, icon: getWeatherIcon('150'), windDegree: 10, time: '5am' },
  { temp: 24, icon: getWeatherIcon('150'), windDegree: 0, time: '6am' },
  { temp: 25, icon: getWeatherIcon('100'), windDegree: 350, time: '7am' },
  { temp: 27, icon: getWeatherIcon('100'), windDegree: 340, time: '8am' }
])

// 显示的小时数据（每2小时显示一个，共12个）
const visibleHourlyData = ref([
  { iconCode: '101', windDegree: 299, time: '9am' },
  { iconCode: '100', windDegree: 280, time: '11am' },
  { iconCode: '100', windDegree: 269, time: '1pm' },
  { iconCode: '100', windDegree: 203, time: '3pm' },
  { iconCode: '100', windDegree: 180, time: '5pm' },
  { iconCode: '100', windDegree: 140, time: '7pm' },
  { iconCode: '150', windDegree: 90, time: '9pm' },
  { iconCode: '150', windDegree: 60, time: '11pm' },
  { iconCode: '150', windDegree: 30, time: '1am' },
  { iconCode: '150', windDegree: 0, time: '3am' },
  { iconCode: '150', windDegree: 340, time: '5am' },
  { iconCode: '100', windDegree: 320, time: '7am' }
])

// 未来预报数据
const forecastData = ref([
  { weekday: '今天', date: '09月15日', icon: '100', weather: '晴', tempMax: 34, tempMin: 25, spaceLeft: 5.9, spaceRight: 29.3 },
  { weekday: '周二', date: '09月16日', icon: '101', weather: '多云', tempMax: 35, tempMin: 26, spaceLeft: 0.0, spaceRight: 35.2 },
  { weekday: '周三', date: '09月17日', icon: '305', weather: '小雨', tempMax: 29, tempMin: 20, spaceLeft: 35.2, spaceRight: 0.0 },
  { weekday: '周四', date: '09月18日', icon: '305', weather: '小雨', tempMax: 24, tempMin: 21, spaceLeft: 64.5, spaceRight: 5.9 },
  { weekday: '周五', date: '09月19日', icon: '305', weather: '小雨', tempMax: 26, tempMin: 21, spaceLeft: 52.8, spaceRight: 5.9 },
  { weekday: '周六', date: '09月20日', icon: '101', weather: '多云', tempMax: 27, tempMin: 22, spaceLeft: 47.0, spaceRight: 11.7 },
  { weekday: '周日', date: '09月21日', icon: '101', weather: '多云', tempMax: 29, tempMin: 23, spaceLeft: 35.2, spaceRight: 17.6 }
])

// 初始化24小时预报图表 - 使用柱状图
const initHour24Chart = () => {
  if (!hour24Chart.value) return
  
  const myChart = echarts.init(hour24Chart.value)
  
  // 准备数据 - 使用visibleHourlyData以确保图表和底部图标数量匹配
  const chartData = []
  const chartTimes = []

  // 从hourlyData中找到对应visibleHourlyData时间点的温度数据
  visibleHourlyData.value.forEach(visibleItem => {
    const matchingHour = hourlyData.value.find(hour => hour.time === visibleItem.time)
    if (matchingHour) {
      chartData.push(matchingHour.temp)
      chartTimes.push(matchingHour.time)
    }
  })
  
  const option = {
    grid: {
      top: 40,
      bottom: 10,
      left: 0,
      right: 0,
      containLabel: false
    },
    xAxis: {
      type: 'category',
      data: chartTimes,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
      boundaryGap: true
    },
    yAxis: {
      type: 'value',
      show: false,
      min: function(value) {
        return Math.max(0, value.min - 3)
      },
      max: function(value) {
        return value.max + 3
      }
    },
    series: [{
      data: chartData,
      type: 'bar',
      barWidth: '50%',
      barCategoryGap: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4A90E2' },
          { offset: 0.6, color: '#7BB3F0' },
          { offset: 1, color: '#A8D0FF' }
        ]),
        borderRadius: [4, 4, 0, 0]
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}°',
        color: '#606266',
        fontSize: 13,
        fontWeight: '500',
        distance: 5
      }
    }]
  }
  
  myChart.setOption(option)
  
  // 响应式处理
  const resizeChart = () => {
    myChart.resize()
  }
  
  window.addEventListener('resize', resizeChart)
  
  // 组件卸载时移除监听器
  // 注意：在 Vue 3 的 setup 语法中，我们需要在 onUnmounted 中清理
}

// 初始化历史温度趋势图表
const initHistoricalTempChart = () => {
  if (!historicalTempChart.value) return
  
  const myChart = echarts.init(historicalTempChart.value)
  
  // 准备数据
  const years = historicalTempData.value.map(item => item.year)
  const maxTemps = historicalTempData.value.map(item => item.maxTemp)
  const minTemps = historicalTempData.value.map(item => item.minTemp)
  const avgTemps = historicalTempData.value.map(item => item.avgTemp)
  
  const option = {
    title: {
      text: '过去9年温度变化趋势',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#333'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let result = params[0].name + '年<br/>'
        params.forEach(param => {
          result += param.marker + param.seriesName + ': ' + param.value + '°C<br/>'
        })
        return result
      }
    },
    legend: {
      data: ['年最高温度', '年平均温度', '年最低温度'],
      top: 35,
      left: 'center',
      itemGap: 20,
      itemWidth: 14,
      itemHeight: 14,
      textStyle: {
        fontSize: 13,
        color: '#666',
        fontWeight: '500'
      },
      inactiveColor: '#ccc'
    },
    grid: {
      left: '8%',
      right: '8%',
      top: '25%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years,
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      name: '温度(°C)',
      nameTextStyle: {
        fontSize: 12,
        color: '#666'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#F0F0F0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '年最高温度',
        type: 'line',
        data: maxTemps,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#FF6B35',
          width: 3
        },
        itemStyle: {
          color: '#FF6B35'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 107, 53, 0.2)' },
            { offset: 1, color: 'rgba(255, 107, 53, 0.02)' }
          ])
        }
      },
      {
        name: '年平均温度',
        type: 'line',
        data: avgTemps,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#4CAF50',
          width: 3
        },
        itemStyle: {
          color: '#4CAF50'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(76, 175, 80, 0.15)' },
            { offset: 1, color: 'rgba(76, 175, 80, 0.02)' }
          ])
        }
      },
      {
        name: '年最低温度',
        type: 'line',
        data: minTemps,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#4FC3F7',
          width: 3
        },
        itemStyle: {
          color: '#4FC3F7'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(79, 195, 247, 0.2)' },
            { offset: 1, color: 'rgba(79, 195, 247, 0.02)' }
          ])
        }
      }
    ]
  }
  
  myChart.setOption(option)
  
  // 响应式处理
  const resizeHistoricalChart = () => {
    myChart.resize()
  }
  
  window.addEventListener('resize', resizeHistoricalChart)
}

// 获取当前位置
const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        async (position) => {
          currentLocation.value.latitude = position.coords.latitude
          currentLocation.value.longitude = position.coords.longitude

          // 获取城市信息
          await getCityInfo(position.coords.longitude, position.coords.latitude)
          resolve()
        },
        (error) => {
          console.error('获取位置失败:', error)
          resolve()
        },
        {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0
        }
      )
    } else {
      console.log('浏览器不支持地理定位')
      resolve()
    }
  })
}

// 获取城市信息
const getCityInfo = async (longitude, latitude) => {
  try {
    const response = await axios.get(
      `${API_BASE_URL}/geo/v2/city/lookup`,
      {
        params: {
          location: `${longitude},${latitude}`,
          key: API_KEY
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.location) {
      const location = response.data.location[0]
      currentLocation.value.city = location.adm2 || location.name
      currentLocation.value.district = location.name
    }
  } catch (error) {
    console.error('获取城市信息失败:', error)
  }
}

// 获取实时天气数据
const fetchCurrentWeather = async () => {
  try {
    const location = `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`

    const response = await axios.get(
      `${API_BASE_URL}/v7/weather/now`,
      {
        params: {
          location: location,
          key: API_KEY,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.now) {
      const data = response.data.now

      // 更新当前天气数据
      currentWeather.value.temp = data.temp
      currentWeather.value.weather = data.text
      currentWeather.value.icon = data.icon
      currentWeather.value.windDir = data.windDir
      currentWeather.value.windScale = data.windScale + '级'
      currentWeather.value.humidity = data.humidity + '%'
      currentWeather.value.vis = data.vis + 'km'
      currentWeather.value.pressure = data.pressure + 'hPa'
      currentWeather.value.precip = (data.precip || '0.0') + 'mm'
      currentWeather.value.feelsLike = data.feelsLike + '°'

      // UV指数处理
      const uvIndex = parseInt(data.uv)
      if (uvIndex <= 2) {
        currentWeather.value.uvIndex = '弱'
      } else if (uvIndex <= 5) {
        currentWeather.value.uvIndex = '中等'
      } else if (uvIndex <= 7) {
        currentWeather.value.uvIndex = '强'
      } else {
        currentWeather.value.uvIndex = '很强'
      }

      // 格式化更新时间
      currentWeather.value.updateTime = new Date(data.obsTime).toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      }).replace(/(\d+)\/(\d+) /, '$1月$2日 ')
    }
  } catch (error) {
    console.error('获取实时天气失败:', error)
  }
}

// 获取24小时天气预报
const fetchHourlyWeather = async () => {
  try {
    const location = `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`

    const response = await axios.get(
      `${API_BASE_URL}/v7/weather/24h`,
      {
        params: {
          location: location,
          key: API_KEY,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.hourly) {
      const hourlyApiData = response.data.hourly

      // 更新24小时完整数据
      hourlyData.value = hourlyApiData.map(hour => {
        const hourNum = new Date(hour.fxTime).getHours()
        const isAM = hourNum < 12
        const displayHour = hourNum === 0 ? 12 : (hourNum > 12 ? hourNum - 12 : hourNum)

        return {
          temp: parseInt(hour.temp),
          icon: hour.icon,
          windDegree: parseInt(hour.wind360) || 0,
          time: displayHour + (isAM ? 'am' : 'pm')
        }
      })

      // 更新可视化数据 - 选择12个时间点（每2小时一个）
      const visibleData = []
      // 每2小时选择一个时间点，总共12个
      for (let i = 0; i < Math.min(hourlyApiData.length, 24); i += 2) {
        const hour = hourlyApiData[i]
        const hourNum = new Date(hour.fxTime).getHours()
        const isAM = hourNum < 12
        const displayHour = hourNum === 0 ? 12 : (hourNum > 12 ? hourNum - 12 : hourNum)

        visibleData.push({
          iconCode: hour.icon,
          windDegree: parseInt(hour.wind360) || 0,
          time: displayHour + (isAM ? 'am' : 'pm')
        })
      }
      visibleHourlyData.value = visibleData.slice(0, 12)
    }
  } catch (error) {
    console.error('获取24小时预报失败:', error)
  }
}

// 获取天气预报数据
const fetchDailyWeather = async () => {
  try {
    const location = `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`

    const response = await axios.get(
      `${API_BASE_URL}/v7/weather/7d`,
      {
        params: {
          location: location,
          key: API_KEY,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.daily) {
      const dailyApiData = response.data.daily
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

      // 计算温度范围用于温度条显示
      const allTemps = []
      dailyApiData.forEach(day => {
        allTemps.push(parseInt(day.tempMin), parseInt(day.tempMax))
      })
      const minTemp = Math.min(...allTemps)
      const maxTemp = Math.max(...allTemps)
      const tempRange = maxTemp - minTemp

      forecastData.value = dailyApiData.slice(0, 7).map((day, index) => {
        const date = new Date(day.fxDate)
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const dayOfMonth = date.getDate().toString().padStart(2, '0')

        let weekday
        if (index === 0) {
          weekday = '今天'
        } else if (index === 1) {
          weekday = '明天'
        } else {
          weekday = weekDays[date.getDay()]
        }

        const tempMin = parseInt(day.tempMin)
        const tempMax = parseInt(day.tempMax)

        // 计算温度条的位置
        const spaceLeft = tempRange > 0 ? ((tempMin - minTemp) / tempRange) * 100 : 0
        const spaceRight = tempRange > 0 ? ((maxTemp - tempMax) / tempRange) * 100 : 0

        return {
          weekday: weekday,
          date: `${month}月${dayOfMonth}日`,
          icon: day.iconDay,
          weather: day.textDay,
          tempMax: tempMax,
          tempMin: tempMin,
          spaceLeft: Math.max(0, spaceLeft),
          spaceRight: Math.max(0, spaceRight)
        }
      })
    }
  } catch (error) {
    console.error('获取天气预报失败:', error)
  }
}

// 获取AQI等级信息
const getAQILevel = (aqi) => {
  if (aqi <= 50) return { level: '优', category: 1, color: '#00e400' }
  if (aqi <= 100) return { level: '良', category: 2, color: '#ffff00' }
  if (aqi <= 150) return { level: '轻度污染', category: 3, color: '#ff7e00' }
  if (aqi <= 200) return { level: '中度污染', category: 4, color: '#ff0000' }
  if (aqi <= 300) return { level: '重度污染', category: 5, color: '#8f3f97' }
  return { level: '严重污染', category: 6, color: '#7e0023' }
}

// 获取空气质量数据
const fetchAirQuality = async () => {
  try {
    const location = `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`

    const response = await axios.get(
      `${API_BASE_URL}/v7/air/now`,
      {
        params: {
          location: location,
          key: API_KEY,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.now) {
      const data = response.data.now

      // 更新当前AQI数据
      currentAQI.value.aqi = parseInt(data.aqi)
      const levelInfo = getAQILevel(parseInt(data.aqi))
      currentAQI.value.level = data.category || levelInfo.level
      currentAQI.value.category = parseInt(data.level) || levelInfo.category

      // 更新污染物数据
      currentAQI.value.pm25 = parseInt(data.pm2p5) || currentAQI.value.pm25
      currentAQI.value.pm10 = parseInt(data.pm10) || currentAQI.value.pm10
      currentAQI.value.o3 = parseInt(data.o3) || currentAQI.value.o3
      currentAQI.value.co = parseFloat(data.co) || currentAQI.value.co
      currentAQI.value.no2 = parseInt(data.no2) || currentAQI.value.no2
      currentAQI.value.so2 = parseInt(data.so2) || currentAQI.value.so2
    }
  } catch (error) {
    console.error('获取空气质量数据失败:', error)
  }
}

// 绘制AQI圆形图表
const drawAQIChart = () => {
  if (!airCanvas.value) return
  
  const canvas = airCanvas.value
  const ctx = canvas.getContext('2d')
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const radius = 60
  
  // 绘制圆形彩虹渐变背景
  const gradient = ctx.createConicGradient(Math.PI * 1.5, centerX, centerY)
  gradient.addColorStop(0, '#00e400')
  gradient.addColorStop(0.167, '#ffff00')
  gradient.addColorStop(0.333, '#ff7e00')
  gradient.addColorStop(0.5, '#ff0000')
  gradient.addColorStop(0.667, '#8f3f97')
  gradient.addColorStop(0.833, '#7e0023')
  gradient.addColorStop(1, '#00e400')
  
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
  ctx.fillStyle = gradient
  ctx.fill()
  
  // 绘制中心白色圆形
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius - 15, 0, 2 * Math.PI)
  ctx.fillStyle = 'white'
  ctx.fill()
  
  // 绘制AQI数值
  ctx.font = 'bold 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'
  const levelInfo = getAQILevel(currentAQI.value.aqi)
  ctx.fillStyle = levelInfo.color
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(currentAQI.value.aqi.toString(), centerX, centerY)
}

// 获取太阳和月亮的天文数据
const fetchAstronomyData = async () => {
  try {
    const location = `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`
    const today = new Date().toISOString().slice(0, 10).replace(/-/g, '')

    // 1. 获取日出日落数据
    const sunResponse = await axios.get(
      `${API_BASE_URL}/v7/astronomy/sun`,
      {
        params: {
          location: location,
          key: API_KEY,
          date: today
        }
      }
    )

    if (sunResponse.data && sunResponse.data.code === '200') {
      console.log('fxLink:', sunResponse.data.fxLink)
      const sunInfo = sunResponse.data
      sunData.value.sunrise = sunInfo.sunrise
      sunData.value.sunset = sunInfo.sunset
      sunData.value.fxLink = sunInfo.fxLink
    }

    // 2. 获取月亮和月相数据
    const moonResponse = await axios.get(
      `${API_BASE_URL}/v7/astronomy/moon`,
      {
        params: {
          location: location,
          key: API_KEY,
          date: today
        }
      }
    )

    if (moonResponse.data && moonResponse.data.code === '200') {
      const moonInfo = moonResponse.data
      moonData.value.moonrise = moonInfo.moonrise || '--'
      moonData.value.moonset = moonInfo.moonset || '--'
      moonData.value.fxLink = moonInfo.fxLink

      // 月相处理
      const phaseValue = parseInt(moonInfo.moonPhase?.value || 0)
      const phaseNames = ['新月', '蛾眉月', '上弦月', '盈凸月', '满月', '亏凸月', '下弦月', '残月']
      const phaseIcons = ['🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘']

      const phaseIndex = Math.floor(phaseValue / 45) % 8
      moonData.value.phaseName = phaseNames[phaseIndex] || moonInfo.moonPhase?.name || '未知'
      moonData.value.phaseIcon = phaseIcons[phaseIndex] || '🌙'
    }

    // 3. 获取太阳高度角
    const now = new Date()
    const currentTime = `${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`

    const solarResponse = await axios.get(
      `${API_BASE_URL}/v7/astronomy/solar-elevation-angle`,
      {
        params: {
          location: location,
          key: API_KEY,
          date: today,
          time: currentTime,
          alt: 0,
          tz: '+0800'
        }
      }
    )

    if (solarResponse.data && solarResponse.data.code === '200') {
      const solarInfo = solarResponse.data
      sunData.value.altitude = Math.round(parseFloat(solarInfo.solarElevationAngle || -34)).toString()
      sunData.value.azimuth = Math.round(parseFloat(solarInfo.solarAzimuthAngle || 298)) + '°'
    }

  } catch (error) {
    console.error('获取天文数据失败:', error)
  }
}

// 绘制太阳轨迹图
const drawSunTrajectory = () => {
  if (!sunChart.value) return

  // 清空容器
  sunChart.value.innerHTML = ''

  const canvas = document.createElement('canvas')
  canvas.width = 500
  canvas.height = 260
  sunChart.value.appendChild(canvas)

  const ctx = canvas.getContext('2d')
  const dpr = window.devicePixelRatio || 1
  canvas.width *= dpr
  canvas.height *= dpr
  ctx.scale(dpr, dpr)
  canvas.style.width = '500px'
  canvas.style.height = '260px'

  // 背景渐变
  const bgGradient = ctx.createLinearGradient(0, 0, 0, 260)
  bgGradient.addColorStop(0, '#87CEEB') // 天空蓝
  bgGradient.addColorStop(0.7, '#FFE4B5') // 日落黄
  bgGradient.addColorStop(1, '#98FB98') // 地面绿
  ctx.fillStyle = bgGradient
  ctx.fillRect(0, 0, 500, 260)

  // 地平线
  ctx.strokeStyle = '#8B4513'
  ctx.lineWidth = 3
  ctx.beginPath()
  ctx.moveTo(0, 200)
  ctx.lineTo(500, 200)
  ctx.stroke()

  // 地面装饰
  ctx.fillStyle = 'rgba(34, 139, 34, 0.3)'
  ctx.fillRect(0, 200, 500, 60)

  // 太阳轨迹
  const horizonY = 200
  const maxHeight = 120

  // 完整轨迹（优雅的虚线）
  ctx.strokeStyle = 'rgba(255, 215, 0, 0.6)'
  ctx.lineWidth = 4
  ctx.setLineDash([15, 8])
  ctx.beginPath()
  for (let x = 60; x <= 440; x += 3) {
    const progress = (x - 60) / 380
    const y = horizonY - Math.sin(progress * Math.PI) * maxHeight
    if (x === 60) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  }
  ctx.stroke()
  ctx.setLineDash([])

  // 当前太阳位置计算
  const currentHour = new Date().getHours() + new Date().getMinutes() / 60
  const sunriseHour = parseFloat(sunData.value.sunrise.split(':')[0]) + parseFloat(sunData.value.sunrise.split(':')[1]) / 60
  const sunsetHour = parseFloat(sunData.value.sunset.split(':')[0]) + parseFloat(sunData.value.sunset.split(':')[1]) / 60

  let currentSunX = 250
  let currentSunY = horizonY + 40
  let isAboveHorizon = false

  if (currentHour >= sunriseHour && currentHour <= sunsetHour) {
    isAboveHorizon = true
    const dayProgress = (currentHour - sunriseHour) / (sunsetHour - sunriseHour)
    currentSunX = 60 + dayProgress * 380
    currentSunY = horizonY - Math.sin(dayProgress * Math.PI) * maxHeight

    // 已走过的轨迹（金色实线）
    const passedGradient = ctx.createLinearGradient(60, 0, currentSunX, 0)
    passedGradient.addColorStop(0, '#FFD700')
    passedGradient.addColorStop(1, '#FFA500')
    ctx.strokeStyle = passedGradient
    ctx.lineWidth = 6
    ctx.beginPath()
    for (let x = 60; x <= currentSunX; x += 2) {
      const progress = (x - 60) / 380
      const y = horizonY - Math.sin(progress * Math.PI) * maxHeight
      if (x === 60) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    ctx.stroke()
  }

  // 日出点
  const sunriseX = 60
  const sunriseY = horizonY

  // 日出光晕
  const sunriseGradient = ctx.createRadialGradient(sunriseX, sunriseY, 0, sunriseX, sunriseY, 20)
  sunriseGradient.addColorStop(0, 'rgba(255, 184, 77, 0.8)')
  sunriseGradient.addColorStop(1, 'rgba(255, 184, 77, 0)')
  ctx.fillStyle = sunriseGradient
  ctx.beginPath()
  ctx.arc(sunriseX, sunriseY, 20, 0, 2 * Math.PI)
  ctx.fill()

  ctx.fillStyle = '#FF6347'
  ctx.beginPath()
  ctx.arc(sunriseX, sunriseY, 8, 0, 2 * Math.PI)
  ctx.fill()

  // 日出文字
  ctx.fillStyle = '#fff'
  ctx.font = 'bold 14px Arial'
  ctx.textAlign = 'center'
  ctx.strokeStyle = 'rgba(0,0,0,0.5)'
  ctx.lineWidth = 3
  ctx.strokeText(sunData.value.sunrise, sunriseX, sunriseY - 25)
  ctx.fillText(sunData.value.sunrise, sunriseX, sunriseY - 25)
  ctx.font = '12px Arial'
  ctx.strokeText('日出', sunriseX, sunriseY - 10)
  ctx.fillText('日出', sunriseX, sunriseY - 10)

  // 日落点
  const sunsetX = 440
  const sunsetY = horizonY

  // 日落光晕
  const sunsetGradient = ctx.createRadialGradient(sunsetX, sunsetY, 0, sunsetX, sunsetY, 20)
  sunsetGradient.addColorStop(0, 'rgba(255, 107, 53, 0.8)')
  sunsetGradient.addColorStop(1, 'rgba(255, 107, 53, 0)')
  ctx.fillStyle = sunsetGradient
  ctx.beginPath()
  ctx.arc(sunsetX, sunsetY, 20, 0, 2 * Math.PI)
  ctx.fill()

  ctx.fillStyle = '#FF4500'
  ctx.beginPath()
  ctx.arc(sunsetX, sunsetY, 8, 0, 2 * Math.PI)
  ctx.fill()

  // 日落文字
  ctx.fillStyle = '#fff'
  ctx.font = 'bold 14px Arial'
  ctx.textAlign = 'center'
  ctx.strokeStyle = 'rgba(0,0,0,0.5)'
  ctx.lineWidth = 3
  ctx.strokeText(sunData.value.sunset, sunsetX, sunsetY - 25)
  ctx.fillText(sunData.value.sunset, sunsetX, sunsetY - 25)
  ctx.font = '12px Arial'
  ctx.strokeText('日落', sunsetX, sunsetY - 10)
  ctx.fillText('日落', sunsetX, sunsetY - 10)

  // 当前太阳
  if (isAboveHorizon) {
    // 太阳光晕
    const sunGlow = ctx.createRadialGradient(currentSunX, currentSunY, 0, currentSunX, currentSunY, 40)
    sunGlow.addColorStop(0, 'rgba(255, 215, 0, 0.8)')
    sunGlow.addColorStop(0.5, 'rgba(255, 165, 0, 0.4)')
    sunGlow.addColorStop(1, 'rgba(255, 215, 0, 0)')
    ctx.fillStyle = sunGlow
    ctx.beginPath()
    ctx.arc(currentSunX, currentSunY, 40, 0, 2 * Math.PI)
    ctx.fill()

    // 太阳主体
    const sunGradient = ctx.createRadialGradient(currentSunX, currentSunY, 0, currentSunX, currentSunY, 18)
    sunGradient.addColorStop(0, '#FFFF99')
    sunGradient.addColorStop(0.7, '#FFD700')
    sunGradient.addColorStop(1, '#FFA500')
    ctx.fillStyle = sunGradient
    ctx.beginPath()
    ctx.arc(currentSunX, currentSunY, 18, 0, 2 * Math.PI)
    ctx.fill()

    // 太阳光芒
    ctx.strokeStyle = '#FFD700'
    ctx.lineWidth = 3
    for (let i = 0; i < 12; i++) {
      const angle = (i * Math.PI * 2) / 12
      const x1 = currentSunX + Math.cos(angle) * 25
      const y1 = currentSunY + Math.sin(angle) * 25
      const x2 = currentSunX + Math.cos(angle) * 35
      const y2 = currentSunY + Math.sin(angle) * 35
      ctx.beginPath()
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.stroke()
    }
  } else {
    // 太阳在地平线下方（夜晚）
    ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'
    ctx.beginPath()
    ctx.arc(currentSunX, currentSunY, 12, 0, 2 * Math.PI)
    ctx.fill()
  }
}

// 绘制月亮轨迹图
const drawMoonTrajectory = () => {
  if (!moonChart.value) return

  // 清空容器
  moonChart.value.innerHTML = ''

  const canvas = document.createElement('canvas')
  canvas.width = 500
  canvas.height = 260
  moonChart.value.appendChild(canvas)

  const ctx = canvas.getContext('2d')
  const dpr = window.devicePixelRatio || 1
  canvas.width *= dpr
  canvas.height *= dpr
  ctx.scale(dpr, dpr)
  canvas.style.width = '500px'
  canvas.style.height = '260px'

  // 夜空背景渐变
  const bgGradient = ctx.createLinearGradient(0, 0, 0, 260)
  bgGradient.addColorStop(0, '#191970') // 深蓝夜空
  bgGradient.addColorStop(0.3, '#483D8B') // 紫色夜空
  bgGradient.addColorStop(0.7, '#2F4F4F') // 深灰绿
  bgGradient.addColorStop(1, '#228B22') // 地面绿
  ctx.fillStyle = bgGradient
  ctx.fillRect(0, 0, 500, 260)

  // 添加星星背景
  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
  for (let i = 0; i < 20; i++) {
    const x = Math.random() * 500
    const y = Math.random() * 180
    const size = Math.random() * 2 + 1
    ctx.beginPath()
    ctx.arc(x, y, size, 0, 2 * Math.PI)
    ctx.fill()
  }

  // 地平线
  ctx.strokeStyle = '#8B4513'
  ctx.lineWidth = 3
  ctx.beginPath()
  ctx.moveTo(0, 200)
  ctx.lineTo(500, 200)
  ctx.stroke()

  // 地面装饰
  ctx.fillStyle = 'rgba(34, 139, 34, 0.3)'
  ctx.fillRect(0, 200, 500, 60)

  // 月亮轨迹
  const horizonY = 200
  const maxHeight = 120

  // 完整轨迹（优雅的虚线）
  ctx.strokeStyle = 'rgba(192, 192, 192, 0.6)'
  ctx.lineWidth = 4
  ctx.setLineDash([15, 8])
  ctx.beginPath()
  for (let x = 60; x <= 440; x += 3) {
    const progress = (x - 60) / 380
    const y = horizonY - Math.sin(progress * Math.PI) * maxHeight
    if (x === 60) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  }
  ctx.stroke()
  ctx.setLineDash([])

  // 计算当前月亮位置（简化计算）
  const currentHour = new Date().getHours() + new Date().getMinutes() / 60
  let currentMoonX = 250
  let currentMoonY = horizonY + 40
  let isAboveHorizon = false

  // 如果有月出和月落时间，计算位置
  if (moonData.value.moonrise !== '--' && moonData.value.moonset !== '--') {
    const moonriseHour = parseFloat(moonData.value.moonrise.split(':')[0]) + parseFloat(moonData.value.moonrise.split(':')[1]) / 60
    const moonsetHour = parseFloat(moonData.value.moonset.split(':')[0]) + parseFloat(moonData.value.moonset.split(':')[1]) / 60

    if (currentHour >= moonriseHour && currentHour <= moonsetHour) {
      isAboveHorizon = true
      const nightProgress = (currentHour - moonriseHour) / (moonsetHour - moonriseHour)
      currentMoonX = 60 + nightProgress * 380
      currentMoonY = horizonY - Math.sin(nightProgress * Math.PI) * maxHeight

      // 已走过的轨迹（银色实线）
      const passedGradient = ctx.createLinearGradient(60, 0, currentMoonX, 0)
      passedGradient.addColorStop(0, '#C0C0C0')
      passedGradient.addColorStop(1, '#E6E6FA')
      ctx.strokeStyle = passedGradient
      ctx.lineWidth = 6
      ctx.beginPath()
      for (let x = 60; x <= currentMoonX; x += 2) {
        const progress = (x - 60) / 380
        const y = horizonY - Math.sin(progress * Math.PI) * maxHeight
        if (x === 60) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      ctx.stroke()
    }
  }

  // 月出点（如果有月出时间）
  if (moonData.value.moonrise !== '--') {
    const moonriseX = 60
    const moonriseY = horizonY

    // 月出光晕
    const moonriseGradient = ctx.createRadialGradient(moonriseX, moonriseY, 0, moonriseX, moonriseY, 20)
    moonriseGradient.addColorStop(0, 'rgba(192, 192, 192, 0.8)')
    moonriseGradient.addColorStop(1, 'rgba(192, 192, 192, 0)')
    ctx.fillStyle = moonriseGradient
    ctx.beginPath()
    ctx.arc(moonriseX, moonriseY, 20, 0, 2 * Math.PI)
    ctx.fill()

    ctx.fillStyle = '#C0C0C0'
    ctx.beginPath()
    ctx.arc(moonriseX, moonriseY, 8, 0, 2 * Math.PI)
    ctx.fill()

    // 月出文字
    ctx.fillStyle = '#fff'
    ctx.font = 'bold 14px Arial'
    ctx.textAlign = 'center'
    ctx.strokeStyle = 'rgba(0,0,0,0.5)'
    ctx.lineWidth = 3
    ctx.strokeText(moonData.value.moonrise, moonriseX, moonriseY - 25)
    ctx.fillText(moonData.value.moonrise, moonriseX, moonriseY - 25)
    ctx.font = '12px Arial'
    ctx.strokeText('月出', moonriseX, moonriseY - 10)
    ctx.fillText('月出', moonriseX, moonriseY - 10)
  }

  // 月落点（如果有月落时间）
  if (moonData.value.moonset !== '--') {
    const moonsetX = 440
    const moonsetY = horizonY

    // 月落光晕
    const moonsetGradient = ctx.createRadialGradient(moonsetX, moonsetY, 0, moonsetX, moonsetY, 20)
    moonsetGradient.addColorStop(0, 'rgba(176, 196, 222, 0.8)')
    moonsetGradient.addColorStop(1, 'rgba(176, 196, 222, 0)')
    ctx.fillStyle = moonsetGradient
    ctx.beginPath()
    ctx.arc(moonsetX, moonsetY, 20, 0, 2 * Math.PI)
    ctx.fill()

    ctx.fillStyle = '#B0C4DE'
    ctx.beginPath()
    ctx.arc(moonsetX, moonsetY, 8, 0, 2 * Math.PI)
    ctx.fill()

    // 月落文字
    ctx.fillStyle = '#fff'
    ctx.font = 'bold 14px Arial'
    ctx.textAlign = 'center'
    ctx.strokeStyle = 'rgba(0,0,0,0.5)'
    ctx.lineWidth = 3
    ctx.strokeText(moonData.value.moonset, moonsetX, moonsetY - 25)
    ctx.fillText(moonData.value.moonset, moonsetX, moonsetY - 25)
    ctx.font = '12px Arial'
    ctx.strokeText('月落', moonsetX, moonsetY - 10)
    ctx.fillText('月落', moonsetX, moonsetY - 10)
  }

  // 当前月亮
  if (isAboveHorizon) {
    // 月亮光晕
    const moonGlow = ctx.createRadialGradient(currentMoonX, currentMoonY, 0, currentMoonX, currentMoonY, 35)
    moonGlow.addColorStop(0, 'rgba(255, 255, 255, 0.6)')
    moonGlow.addColorStop(0.5, 'rgba(192, 192, 192, 0.3)')
    moonGlow.addColorStop(1, 'rgba(255, 255, 255, 0)')
    ctx.fillStyle = moonGlow
    ctx.beginPath()
    ctx.arc(currentMoonX, currentMoonY, 35, 0, 2 * Math.PI)
    ctx.fill()

    // 月亮主体
    const moonGradient = ctx.createRadialGradient(currentMoonX - 5, currentMoonY - 5, 0, currentMoonX, currentMoonY, 16)
    moonGradient.addColorStop(0, '#FFFFFF')
    moonGradient.addColorStop(0.7, '#E6E6FA')
    moonGradient.addColorStop(1, '#C0C0C0')
    ctx.fillStyle = moonGradient
    ctx.beginPath()
    ctx.arc(currentMoonX, currentMoonY, 16, 0, 2 * Math.PI)
    ctx.fill()

    // 月亮阴影部分（根据月相）
    if (moonData.value.phaseIcon) {
      ctx.fillStyle = 'rgba(105, 105, 105, 0.3)'
      const phaseValue = parseInt(moonData.value.phaseIcon) || 0
      if (phaseValue > 0 && phaseValue < 4) { // 上弦月阶段
        ctx.beginPath()
        ctx.arc(currentMoonX, currentMoonY, 16, Math.PI * 0.5, Math.PI * 1.5)
        ctx.fill()
      } else if (phaseValue > 4) { // 下弦月阶段
        ctx.beginPath()
        ctx.arc(currentMoonX, currentMoonY, 16, Math.PI * 1.5, Math.PI * 0.5)
        ctx.fill()
      }
    }
  } else {
    // 月亮在地平线下方
    ctx.fillStyle = 'rgba(192, 192, 192, 0.3)'
    ctx.beginPath()
    ctx.arc(currentMoonX, currentMoonY, 12, 0, 2 * Math.PI)
    ctx.fill()
  }
}

onMounted(async () => {
  // 先获取当前位置
  await getCurrentLocation()
  // 获取实时天气数据
  await fetchCurrentWeather()
  // 获取小时预报
  await fetchHourlyWeather()
  // 获取日预报
  await fetchDailyWeather()
  // 获取空气质量数据
  await fetchAirQuality()
  // 获取天文数据
  await fetchAstronomyData()

  // 更新当前时间
  const updateTime = () => {
    currentTime.value = new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
  updateTime()
  setInterval(updateTime, 60000) // 每分钟更新一次

  nextTick(() => {
    initHour24Chart()
    drawAQIChart()
    drawSunTrajectory()
    drawMoonTrajectory()
    initHistoricalTempChart()
  })
})
</script>

<style scoped>
/* 历史温度趋势图样式 */
.l-page-city-weather__historical-temp {
  margin-top: 20px;
}

.c-city-historical-temp {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid #e5eaef;
}

.historical-temp-chart {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}

/* CSS 变量定义 */
:root {
  --card-background-color: #ffffff;
  --card-border-color: #e5eaef;
  --text-black-1: #333333;
  --text-black-2: #666666;
  --split-line-color: #f0f0f0;
}

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background-color: #f2f6fc;
}

/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 主体内容 */
.body-content--subpage {
  min-height: 100vh;
}

/* 主布局 */
.l-page-city-weather {
  padding-bottom: 40px;
}

.l-page-city-weather__current {
  margin-bottom: 20px;
}

/* 当前天气 */
.c-city-weather-current {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.city-weather-cloudy .current-weather__bg {
  background: linear-gradient(180deg, #7A8DA8 0%, #8FA1BD 100%);
}

.current-weather__bg {
  padding: 24px 30px;
  color: white;
}

.current-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.current-time-aqi {
  text-align: right;
}

.current-time {
  font-size: 12px;
  opacity: 0.9;
  margin: 0 0 8px 0;
}

.current-live {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.current-live__item {
  margin-right: 24px;
  text-align: center;
}

.current-live__item:last-child {
  margin-right: 0;
}

.current-live__item img {
  width: 80px;
  height: 80px;
}

.current-live__item .temperature {
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}

.current-live__item .weather-desc {
  font-size: 20px;
  margin: 8px 0 0 0;
}

.air-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  text-decoration: none;
  color: white;
}

.air-tag--1 {
  background-color: rgba(255, 255, 255, 0.2);
}

.current-abstract {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  opacity: 0.95;
}

.current-basic {
  flex-wrap: wrap;
}

.current-basic___item {
  text-align: center;
  flex: 1;
  min-width: 60px;
}

.current-basic___item p:first-child {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 4px 0;
}

.current-basic___item p:last-child {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* 左右布局 */
.qweather-layout {
  gap: 20px;
}

.qweather-list {
  flex: 1;
  min-width: 0;
}

.qweather-menu {
  width: 300px;
  flex-shrink: 0;
}

/* 卡片样式 */
.qweather-list__row,
.qweather-menu__row {
  background: var(--card-background-color);
  border-radius: 16px;
  border: 1px solid var(--card-border-color);
  padding: 30px 20px 20px;
  margin-bottom: 20px;
}

.qweather-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-black-1);
  margin: 0 0 16px 0;
  text-align: center;
}

/* 24小时预报 */
.c-city-weather-hour24 {
  border-radius: 16px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  padding: 30px 20px 24px;
}

.c-city-weather-hour24 .city-hour24__chart {
  margin: 10px 20px 5px 20px;
  height: 153px;
}

.c-city-weather-hour24 .hour24 {
  padding: 0 20px;
}

.c-city-weather-hour24 .hour24 .hour24__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.c-city-weather-hour24 .hour24 .hour24__item > img {
  display: block;
  margin: 0 auto 8px;
  width: 28px;
  height: auto;
}

.c-city-weather-hour24 .hour24 .hour24__item > .wind-arrow {
  display: block;
  margin: 8px auto;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  transform-origin: center;
}

.c-city-weather-hour24 .hour24 .hour24__item > span {
  display: block;
  font-size: 14px;
  color: var(--text-black-2);
  line-height: 16px;
  margin-top: 8px;
}

/* 未来预报 */
.c-city-weather-forecast {
  padding: 30px 20px 20px;
  border-radius: 16px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
}

.c-city-weather-forecast .qweather-tabs {
  margin-top: 28px;
}

.c-city-weather-forecast .tabs__row {
  padding: 9px 16px;
  margin-bottom: 6px;
  transition: background-color 0.2s;
  border-radius: 11px;
  background-color: #fafafa;
  justify-content: space-between;
}

.c-city-weather-forecast .tabs__row:last-child {
  margin-bottom: 0;
}

.c-city-weather-forecast .tabs__row:hover {
  background-color: #f0f0f0;
}

.c-city-weather-forecast .date-bg {
  flex: 0 0 143px;
  width: 0;
  white-space: nowrap;
  margin: 0 20px 0 0;
}

.c-city-weather-forecast .date {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  white-space: nowrap;
  margin-right: 12px;
}

.c-city-weather-forecast .date p {
  margin: 0;
}

.c-city-weather-forecast .date p:first-child {
  font-size: 16px;
  line-height: 1;
  color: var(--text-black-1);
  font-weight: 500;
}

.c-city-weather-forecast .date p:last-child {
  font-size: 14px;
  line-height: 16px;
  color: var(--text-black-2);
  margin-top: 2px;
}

.c-city-weather-forecast .icon {
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: auto;
}

.c-city-weather-forecast .tmp-line-bg {
  flex: 1 0;
  width: 0;
}

.c-city-weather-forecast .tmp-line-bg .space {
  width: 0;
  max-width: calc(100% - 95px);
}

.c-city-weather-forecast .tmp-line-bg .tmp-cont {
  flex: 1 0;
  width: 0;
  min-width: 95px;
}

.c-city-weather-forecast .temp {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-black-1);
  white-space: nowrap;
  text-align: right;
  flex: 0 0 36px;
  padding-right: 4px;
  padding-left: 0;
  width: 0;
}

.c-city-weather-forecast .temp.last {
  text-align: left;
  padding-left: 4px;
  padding-right: 0;
}

.c-city-weather-forecast .tmp-line {
  display: inline-block;
  vertical-align: middle;
  height: 4px;
  border-radius: 2px;
  margin: 0;
  background-image: linear-gradient(to right, #F18360, #427BFF);
  flex: 1 0;
  width: 0;
}

.c-city-weather-forecast .qweather-arrow-right {
  flex: 0 0 16px;
  height: 16px;
  margin: 0 0 0 16px;
  font-size: 16px;
  color: #d9d9d9;
}

.c-city-weather-forecast .qweather-arrow-right::after {
  content: '›';
}

.c-city-weather-forecast .more {
  margin-top: 20px;
  padding: 19px 0 0;
  border-top: 1px solid var(--split-line-color);
  text-align: center;
}

.c-city-weather-forecast .more > a {
  font-size: 16px;
  line-height: 16px;
  color: #427BFF;
  text-decoration: none;
}

/* 空气质量 */
.c-city-air-current {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid var(--card-border-color);
  gap: 40px;
}

/* AQI圆形图表 */
.city-air__chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40px;
  flex-shrink: 0;
}

.city-air__chart h4 {
  margin: 10px 0 0 0;
  font-size: 20px;
  font-weight: normal;
  color: #333;
}

.aqi {
  position: relative;
  width: 140px;
  height: 140px;
}

/* 空气质量指标 */
.air-charts__iaqi {
  flex: 1;
}

.air-charts-iaqi__row {
  gap: 30px;
}

.air-charts-iaqi__row:not(:last-child) {
  margin-bottom: 20px;
}

.air-charts-iaqi__item {
  text-align: left;
  min-width: 100px;
}

.air-charts-iaqi__item .value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.air-charts-iaqi__item .progress {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden;
}

.air-charts-iaqi__item .progress .progress__value {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.air-tag--1 {
  background: #95B359;
}

.air-tag--2 {
  background: #A9A538;
}

.air-tag--3 {
  background: #ff7e00;
}

.air-tag--4 {
  background: #ff0000;
}

.air-tag--5 {
  background: #8f3f97;
}

.air-tag--6 {
  background: #7e0023;
}

.air-charts-iaqi__item .aqi-title {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* 温度地图 */
.c-img-map {
  position: relative;
}

.c-img-map img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.img-map__title {
  position: absolute;
  top: 10px;
  left: 10px;
}

.img-map__title .qweather-title {
  margin: 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.img-map__btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.img-map__btn a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
}

/* 天气排行 */
.c-city-weather-rank {
  border-radius: 16px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  padding: 30px 20px 20px;
}

.c-city-weather-rank > .qweather-select {
  margin-top: 28px;
}

.qweather-select .nav {
  display: flex;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.qweather-select .nav a {
  position: relative;
  padding: 8px 16px 12px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  cursor: pointer;
}

.qweather-select .nav a.active {
  color: #333;
  font-weight: 500;
}

.qweather-select .nav a .line {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
  display: none;
}

.qweather-select .nav a.active .line {
  display: block;
}

.qweather-select + .tab-content {
  margin-top: 20px;
}

.qweather-tabs .tabs__row {
  border-radius: 11px;
  background-color: #fafafa;
  padding: 0 16px;
  height: 40px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.qweather-tabs .tabs__row:last-child {
  margin: 0;
}

.qweather-tabs .tabs__row > i {
  display: block;
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f0f0f0;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
  color: white;
  text-align: center;
  margin-right: 12px;
}

.qweather-tabs .tabs__row > .city {
  flex: 1 0 auto;
  width: 0;
}

.qweather-tabs .tabs__row > .city > p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-black-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.qweather-tabs .tabs__row > span {
  width: 0;
  text-align: right;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-black-1);
}

.qweather-tabs .tabs__row > span.temp {
  flex: 0 0 40px;
}

.qweather-tabs .tabs__row > span.temp-interval {
  flex: 0 0 80px;
}

.qweather-tabs .tabs__row:nth-of-type(1) > i {
  background-color: #FE8058;
}

.qweather-tabs .tabs__row:nth-of-type(2) > i {
  background-color: #FCB25C;
}

.qweather-tabs .tabs__row:nth-of-type(3) > i {
  background-color: #427BFF;
}

/* 附近城市 */
.c-city-weather-around {
  border-radius: 16px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  padding: 30px 20px 20px;
}

.c-city-weather-around > .qweather-tabs {
  margin-top: 28px;
}

.qweather-tabs .tabs__row > img {
  flex: 0 0 30px;
  height: 30px;
  margin-right: 12px;
}

/* 天文图表样式 */
.c-astronomy-chart {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid var(--card-border-color);
}

.astronomy-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sun-section, .moon-section {
  background: #fafbfc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e5eaef;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h4 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.current-time {
  font-size: 14px;
  color: #666;
  background: #e8f4f8;
  padding: 4px 12px;
  border-radius: 12px;
}

.trajectory-chart {
  width: 100%;
  height: 200px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5eaef;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.trajectory-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.sun-info, .moon-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.sun-times, .moon-times {
  display: flex;
  gap: 40px;
}

.time-item {
  text-align: center;
}

.time-item .time {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.time-item .label {
  display: block;
  font-size: 12px;
  color: #666;
}

.sun-position, .moon-position {
  display: flex;
  gap: 30px;
}

.position-item {
  text-align: center;
}

.position-item .value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.position-item .label {
  display: block;
  font-size: 12px;
  color: #666;
}

.moon-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f3f5;
  padding: 8px 16px;
  border-radius: 20px;
}

.phase-icon {
  font-size: 20px;
}

.phase-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 工具类 */
.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-baseline {
  align-items: baseline;
}

.text-center {
  text-align: center;
}

/* 响应式 */
@media (max-width: 739px) {
  .qweather-layout {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  
  .qweather-layout .qweather-list {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
  }
  
  .qweather-layout .qweather-list .qweather-list__row {
    margin: 0 0 12px;
  }
  
  .qweather-layout .qweather-menu {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
  }
  
  .qweather-layout .qweather-menu .qweather-menu__row {
    margin: 0 0 12px;
  }
  
  .qweather-tabs .tabs__row > i {
    font-size: 14px;
  }
}

@media (max-width: 740px) {
  .hidden-740 {
    display: none !important;
  }
  
  .visible-740 {
    display: block !important;
  }
  
  .current-basic___item {
    flex: 0 0 33.33%;
    margin-bottom: 12px;
  }
}

@media (min-width: 741px) {
  .visible-740 {
    display: none !important;
  }
}
</style>